import Dep from "./dep.js"

export default class Observer {
    constructor(data) {
        this.walk(data)
    }
    walk(data) {
        // 1. 判断data是否是对象
        // 2. 遍历data的所有属性
        if (!data || typeof data !== 'object') {
            return
        }
        Object.keys(data).forEach(key => {
            this.defineReactive(data, key, data[key])
        })
    }

    defineReactive(data, key, value) {
        // 为什么需要第三个参数传递value，而不直接使用data[key]？
        // 在get中使用data[key]会循环触发getter，导致栈溢出
        
        // 为什么value属性在defineProperty执行完成后还可以被访问
        // 外部对内部属性存在引用，形成了闭包

        // 如果value是对象，则将对象的属性也转换成响应式数据
        const _this = this

        // 创建Dep对象收集依赖，发送通知
        let dep = new Dep()

        this.walk(value)
        
        Object.defineProperty(data, key, {
            configurable: true,
            enumerable: true,
            get() {
                // 收集依赖
                Dep.target && dep.addSub(Dep.target)

                return value
            },
            set(newValue) {
                if (value === newValue) {
                    return
                }
                value = newValue
                // 当属性被重新赋值为一个对象，将对象属性也转换为响应式数据
                _this.walk(newValue)
                dep.notify()
            }
        })
    }
}